<template>
  <div id="container" class="cls-container">
    <!-- LOGIN FORM -->
    <!--===================================================-->
    <div class="cls-content">
      <div class="cls-content-sm panel">
        <div class="panel-body">
          <div class="mar-ver pad-btm">
            <h3 class="h4 mar-no">{{title}}</h3>
            <p class="text-muted">{{tishi}}</p>
          </div>
          <div>
            <div class="form-group">
              <input type="text" class="form-control" v-model="username" placeholder="请填写用户名" autofocus>
            </div>
            <div class="form-group">
              <input type="password" class="form-control" v-model="password" placeholder="请填写密码">
            </div>
            <div class="form-group" v-if="$route.name == 'register'">
              <input type="password" class="form-control" v-model="repassword" placeholder="请再次填写密码">
            </div>
            <div class="checkbox pad-btm text-left">
              <input id="demo-form-checkbox" class="magic-checkbox" type="checkbox">
              <label for="demo-form-checkbox">记住我</label>
            </div>
            <button class="btn btn-primary btn-lg btn-block" @click="onSubmit">{{sub}}</button>
          </div>
        </div>
        <div class="pad-all" v-if="$route.name == 'login'">
          <span class="btn-link pointer-cu mar-rgt">
            忘记密码 ?
          </span>
          <span class="btn-link pointer-cu mar-lft" @click="wiehuan('register')">新建账号</span>
        </div>
        <div class="pad-all" v-else>
          <span class="btn-link pointer-cu mar-rgt">忘记密码 ?</span>
          <span class="btn-link pointer-cu mar-lft" @click="wiehuan('login')">登录账号</span>
        </div>
      </div>
    </div>
    <!--===================================================-->
  </div>
</template>
<script>
export default {
  created() {
    if (this.$route.name == 'login') {
      this.sub = ' 登 录 '
      this.tishi = '登录到您的帐户'
      this.title = '用户登录'
    } else {
      this.sub = '注册'
      this.tishi = '注册您的账户'
      this.title = '用户注册'
    }
  },
  data() {
    return {
      username: '',
      password: '',
      repassword: '',
      api_url: '',
      sub: '',
      tishi: '',
      title: ''
    }
  },
  watch: {
    '$route.name': function(newValue, oldValue) {
      if (newValue == 'login') {
        this.sub = ' 登 录 '
        this.tishi = '登录到您的帐户'
        this.title = '用户登录'
      } else {
        this.sub = '注册'
        this.tishi = '注册您的账户'
        this.title = '用户注册'
      }
    }
  },
  methods: {
    //点击提交数据
    async onSubmit() {
      let i;
      if (this.$route.name == 'login') {
        i = '/admin/login'
      } else {
        i = '/admin/register'
        if (this.password != this.repassword) {
          return this.$message.warning('两次密码不一致！请重新输入！')
        }
      }
      let userData = await this.fetch(i, { Username: this.username, Password: this.password }, this.$store.getters.Request_Head, 'POST')
      if (userData.status.code !== 1001) {
        this.$message.error(userData.data ? userData.data : userData.status.title)
      } else {
        if (this.$route.name == 'login') {
          this.$message.success('登录成功！')
          this.$store.commit("setUserinfo", userData.data)
          this.getMenu(userData.data.userinfo._id)
          this.$router.push({ name: 'home' })
          setTimeout(function() {
            window.location.reload()
          }, 10);
        } else {
          this.$confirm('账号注册成功！请重新登录！', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {}).catch(() => {});
        }
      }
    },
    //切换登录和注册页面
    wiehuan(value) {
      this.$router.push({ name: value })
    },
    //获取菜单栏数据
    async getMenu(id) {
      let menuData = await this.fetch('/menu/read', { pid: id, is_menu: 1 }, this.$store.getters.Request_Head, 'POST')
      if (menuData.status.code !== 1001) {
        this.$message.error(menuData.data ? menuData.data : menuData.status.title)
      } else {
        console.log(menuData.data)
        this.$store.commit("setNavMenu", menuData.data)
      }
    }

  }
}

</script>
<style>
.pointer-cu {
  cursor: pointer;
}

</style>
